<template>
  <div>
    <NavBar>
      <div slot="logo">党史学习</div>
      <nav-bar-item>
        <template slot="nav-item">
          <router-link
            :to="{ name: 'home' }"
            class="nav-item nav-link text-light bi bi-house-door fs-5 hvr-underline-from-center"
            >作品展示</router-link
          >

          <!-- <router-link
            :to="{ name: 'amusement' }"
            class="nav-item nav-link text-light bi bi-house-door fs-5 hvr-underline-from-center"
          ></router-link>-->

          <!-- <router-link
            :to="{ name: 'partyHistory' }"
            class="nav-item nav-link text-light bi bi-house-door fs-5 hvr-underline-from-center"
          >党史训练</router-link> -->

          <router-link
            :to="{ name: 'about' }"
            class="nav-item nav-link text-light fs-5 bi mylink fs-5 hvr-underline-from-center "
            style="font-weight:900;"
          >红船精神</router-link>
        </template>

        <!-- <template v-slot:login>
          <button
            v-if="!$store.getters.getToken"
            class="btn btn-outline-primary mx-1 login"
            @click="login"
          >
            登陆
          </button>
          <div
            v-if="$store.getters.getToken"
            class="uers d-flex justify-content-center align-item-center"
          >
            <div class="block mx-3 d-none d-md-block ">
              <el-avatar
                :size="50"
                :src="$store.getters.getUserInfo.avatar"
                style="    margin-top: -5px;"
              ></el-avatar>
            </div>
            <el-dropdown>
              <el-button>
                {{ $store.getters.getUserInfo.username
                }}<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>
                    <a
                      href="#"
                      @click="goUser"
                      style="  text-decoration: none !important;"
                      >个人中心</a
                    >
                  </el-dropdown-item>
                  <el-dropdown-item
                    v-if="$store.getters.getUserInfo.roles[0] != '普通用户'"
                    ><a
                      href="#"
                      @click="goadmin"
                      style="  text-decoration: none !important;"
                      >后台管理</a
                    >
                  </el-dropdown-item>
                  <el-dropdown-item
                    ><a
                      href="#"
                      @click="exit"
                      style="  text-decoration: none !important;"
                      >退出登录</a
                    >
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </template>-->
      </nav-bar-item>
    </NavBar>
  </div>
</template>

<script>
import NavBar from '@/common/NavBar/NavBar.vue'
import NavBarItem from '@/common/NavBar/NavBarItem.vue'
export default {
  data() {
    return {}
  },
  components: {
    NavBar,
    NavBarItem,
  },

  methods: {
    login() {
      this.$router.push('/login')
    },
    goadmin() {
      this.$router.push('/admin/dashboard')
    },
    exit() {
      this.$store.commit('setToken', '')
      this.$store.commit('setUserInfo', {})
      window.sessionStorage.clear()
      window.localStorage.clear()
      this.$router.push('/home')
    },
    goUser() {
      this.$router.push({
        path: '/userInfo',
      })
    },
  },
}
</script>

<style lang="less" scoped>
a {
  text-decoration: none !important;
  color: #603266;
}
a:hover {
  text-decoration: none !important;
  color: #66b1ff;
}
</style>
